<!-- loading -->
<!-- <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px'}"></ngx-loading> -->
<div class="content">
    <!-- 错误信息提示框 -->
    <div class="tip-postion" *ngIf="isShowErrorTip">
        <div class="alert alert-danger">
          <span class="glyphicon glyphicon-info-sign"></span>
          <div class="w10"></div>{{errorMessage}}
      </div>
    </div>
  
    <!-- 成功信息提示框 -->
    <div class="tip-postion" *ngIf="isShowSuccessTip">
        <div class="alert alert-success">
          <span class="glyphicon glyphicon-ok"></span>
          <div class="w10"></div>{{successMessage}}
      </div>
    </div>

      <!-- 图片预览 -->
    <div id="myModal" class="modal">
      <span class="close" (click)="closePreview()">×</span>
      <img class="modal-content" [src]="previewUrl" alt="loading">
    </div>
  
    <!-- 遮罩层 -->
    <p-blockUI [blocked]="isShowBlock"></p-blockUI>
  
    <!-- 编辑快递单号 -->
    <div class="panel panel-default add-module" *ngIf="isShowEditTrackingNumber">
      <div class="panel-heading">
        <span>编辑快递单号</span>
      </div>
      <div class="panel-body">
          <input type="text" class="form-control" maxlength="50" [(ngModel)]="trackingNumber" id="trackingNumber" autofocus="autofocus"/>
      </div>
      <div class="panel-footer clearfix">
        <button class="btn btn-default fr" type="button" (click)="cancelEditModule()">取消</button>
        <button class="btn btn-info fr mr10" type="button" (click)="saveEditModule()">保存</button>
      </div>
    </div>
  
    <!-- 确认收货 -->
    <div class="panel panel-default delete-module" *ngIf="isShowConfirmReceive">
      <div class="panel-heading">是否设置为确认收货？</div>
      <div class="panel-body">
        <button class="btn btn-info" (click)="confirmReceive()">确定</button>
        <div class="w10"></div>
        <button class="btn btn-default" (click)="cancelConfirmReceive()">取消</button>
      </div>
    </div>

    <!-- 确认退款 -->
    <div class="panel panel-default delete-module" *ngIf="isShowConfirmRefund">
      <div class="panel-heading">是否确认退款？</div>
      <div class="panel-body">
        <button class="btn btn-info" (click)="confirmRefund()">确定</button>
        <div class="w10"></div>
        <button class="btn btn-default" (click)="cancelConfirmRefund()">取消</button>
      </div>
    </div>
  
    <!-- 订单管理 -->
    <div class="head clearfix">
      <span class="head-title">订单管理</span>
    </div>
    <hr />
    <!-- 订单管理 -->
    <div class="row query">
      <div class="ui-inputgroup order-number">
        <span class="ui-inputgroup-addon">订单编号</span>
        <input type="text" pInputText [(ngModel)]="orderNumber" maxlength="18">    
      </div>
      <div class="order-status">
        <p-dropdown [options]="orderStatuses" [(ngModel)]="orderStatus" placeholder="选择订单状态" optionLabel="name"></p-dropdown>
      </div>
      <button pButton type="button" label="查询" (click)="query($event)"></button>
    </div>
    <div class="crollDiv">
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th width="50px">序号</th>
            <th width="180px">订单编号</th>
            <th width="120px">商品名称</th>
            <th width="300px">商品描述</th>
            <th width="200px">商品图片</th>
            <th width="100px">商品价格</th>
            <th width="150px">收货人</th>
            <th width="200px">地区</th>
            <th width="200px">详细地址</th>
            <th width="150px">手机号码</th>
            <th width="200px">期望配送时间</th>
            <th width="200px">标签</th>
            <th width="200px">备注</th>
            <th width="200px">留言</th>
            <th width="100px">购买数量</th>
            <th width="100px">支付金额</th>
            <th width="100px">支付状态</th>
            <th width="100px">订单状态</th>
            <th width="200px">快递单号</th>
            <th width="180px">下单时间</th>
            <th width="180px">支付时间</th>
            <th width="150px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of orderList;let i = index">
            <td>{{i + 1}}</td>
            <td>{{item?.orderNumber}}</td>
            <td>{{item?.productName}}</td>
            <td>{{item?.productDescription}}</td>
            <td><img (click)="previewImage(item?.productImageUrl)" class="home-carousel-figure-img" [src]="sanitizer.bypassSecurityTrustUrl(item?.productImageUrl)" alt="loading"/></td>
            <td>￥{{item?.productPrice | number:"0.2"}}</td>
            <td>{{item?.username}}</td>
            <td>{{item?.area}}</td>
            <td>{{item?.addressDetail}}</td>
            <td>{{item?.phoneNumber}}</td>
            <td>{{item?.expectedDeliveryTime}}</td>
            <td>{{item?.label}}</td>
            <td>{{item?.remark}}</td>
            <td>{{item?.leaveMessage}}</td>
            <td>{{item?.buyAmount}}</td>
            <td>￥{{item?.payAmount}}</td>
            <td>{{item?.payStatus}}</td>
            <td>{{item?.orderStatus}}</td>
            <td>{{item?.trackingNumber}}</td>
            <td>{{item?.orderTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{item?.payTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td style="white-space: normal !important">
              <button *ngIf="item?.orderStatus == '待发货' || item?.orderStatus == '待收货'" class="btn btn-warning" (click)="editTrackingNumber(item?.orderId)">
                <span class="glyphicon glyphicon-edit"></span>快递单号
              </button>
              <button *ngIf="item?.orderStatus == '待收货'" class="btn btn-danger" (click)="popupConfirmReceive(item?.orderId)" style="margin-top:5px;">
                <span class="glyphicon glyphicon-ok"></span>确认收货
              </button>
              <button *ngIf="item?.orderStatus == '待收货'" class="btn btn-danger" (click)="findLogistics()" style="margin-top:5px;">
                <span class="glyphicon glyphicon-search"></span>查看物流
              </button>
              <button *ngIf="item?.orderStatus == '待退款'" class="btn btn-default" (click)="popupConfirmRefund(item?.orderId)" style="margin-top:5px;">
                <span class="glyphicon glyphicon-edit"></span>确认退款
              </button>
              <button class="btn btn-info" *ngIf="item?.orderStatus == '待发货' || item?.orderStatus == '待收货' || item?.orderStatus == '待评价' || item?.orderStatus == '交易完成'"
               (click)="printOrder(item?.orderId)" style="margin-top:5px;">
                <span class="glyphicon glyphicon-print"></span>打印订单
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <nav aria-label="Page navigation">
      <ul class="pager">
        <li class="previous cp" [class.disabled]="pageNum === 1"><a (click)="prePage()"><span aria-hidden="true">&larr;</span>上一页 </a></li>
        <li><span>当前第{{pageNum}}页&nbsp;共{{pages}}页</span></li>
        <li class="next cp" [class.disabled]="pageNum === pages"><a (click)="nextPage()">下一页 <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>
  </div>
  
